<template>
    <div id="cb_register">
        <div id="cb_content">
            <div id="cb_logo" style="display: flex;justify-content: center">
                <img src="../assets/images/logo.png" alt="">
                <h1 style="color: #1AA5FF">同程管理系统</h1>
            </div>
            <div id="cb_xuanzhe">
                <div id="cb_phone">
                    <span class="cb_lab"><svg class="icon2" aria-hidden="true"><use xlink:href="#icon-shouji"></use></svg></span>
                    <input @blur="to_yanzheng1" class="cb_input"   type="text" placeholder="请输入手机号" v-model="phone">
                    <span id="cb_huoqu" v-on:click="to_yanzheng">获取验证码</span>
                </div>
                <div id="cb_dong">
                    <span class="cb_lab"><svg class="icon2" aria-hidden="true"><use xlink:href="#icon-sousuo"></use></svg></span>
                    <input @blur="to_yanzheng2" class="cb_input"   type="text" placeholder="请输入验证码" v-model="security">
                </div>
                <div class="cb_mima">
                    <span class="cb_lab"><svg class="icon2" aria-hidden="true"><use xlink:href="#icon-mima"></use></svg></span>
                    <input class="cb_input"   type="password" placeholder="请输入密码" v-model="password1" @blur="to_duibi1">
                </div>
                <div class="cb_mima">
                    <span class="cb_lab"><svg class="icon2" aria-hidden="true"><use xlink:href="#icon-mima"></use></svg></span>
                    <input class="cb_input"   type="password" placeholder="请再次输入密码" v-model="password2" @blur="to_duibi2">
                </div>
                <div>
                    <span id="to_denglu" v-on:click="to_login">已有账号，直接登录</span>
                </div>
                <div  class='login_btn'   v-on:click="cb_zhuce">
                    <span class="register_span">注</span>
                    <span class="register_span2">册</span>
                </div>
            </div>
            <div >
                <el-dialog
                        class="cb_duihua"
                        title="注册"
                        :visible.sync="centerDialogVisible"
                        width="25%"
                        center
                        :modal="false"
                >
                    <span>注册成功，是否前往登录</span>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false" v-on:click="to_login">确 定</el-button>
  </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        name: 'Register',
        data() {
            return {
                centerDialogVisible: false,//点击注册的时候，出现的对话框状态
                activeName: 'first',
                phone:"",
                security:"",
                password1:"",
                password2:""
            }
        },
        methods: {
            //点击注册的时候
            to_login(){
                this.$router.push('/login');
            },
           /* 手机号验证，点击获取验证码的时候验证*/
            to_yanzheng1(){
                let phonenum=this.phone
                 if(phonenum==='') {
                    this.$message({
                        message: '手机号不能为空',
                        type: 'warning'
                    })}
                },
            to_yanzheng(){
               /* console.log(this.phone)*/
                let phonenum=this.phone
                 if(phonenum!=''&&(/^1[3456789]\d{9}$/.test(phonenum))) {
                    this.$message({
                        message: '验证码已发送',
                    })}
                 else{
                     this.$message({
                         message: '手机号有误',
                         type: 'warning'
                     })
                 }
                },
            //验证码
            to_yanzheng2(){
                let num=this.security
                    if (num==="") {
                        this.$message({
                            message: '请输入验证码',
                            type: 'warning'
                        })
                    }
            },
            /* 第一次输入密码*/
            to_duibi1(){
                let num1=this.password1
                if (num1==="") {
                    this.$message({
                        message: '密码不能为空',
                        type: 'warning'
                    })
                }
            },
            /*再次输入密码对比*/
            to_duibi2(){
                let num1=this.password1
                let num2=this.password2
                if (num2==="") {
                    this.$message({
                        message: '密码不能为空',
                        type: 'warning'
                    })
                }
                else if(num1!=num2){
                    this.$message({
                    message: '两次输入的密码不一致',
                    type: 'warning'
                })
                }
            },
            /*点击注册的时候验证*/
            cb_zhuce(){
                let num1=this.phone
                let num2=this.security
                let num3=this.password1
                let num4=this.password2
                if(num1==""||num2==""||num3==""||num4==""){
                    this.$message({
                        message: '信息不完整',
                        type: 'warning'
                    })
                }else if(num3==num4&&num2!=""&&num1!=""&&(/^1[3456789]\d{9}$/.test(num1))){
                    this.centerDialogVisible = true
                }
                else if (!(/^1[3456789]\d{9}$/.test(num1))) {
                    this.$message({
                        message: '手机号有错',
                        type: 'warning'
                    })
                }
                else {
                    this.$message({
                        message: '信息有误，请核对后注册',
                        type: 'warning'
                    })
                }
            }

            },
    }
</script>
<style lang="less" scoped>
    .clear:after{
        content: "";
        display: block;
        clear: both;
    }
    .icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    .icon2{
        width: 1.2em;
        height: 1.2em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    *{
        margin: 0;
        padding: 0;
    }
    #cb_register{
        position:absolute;left:0;top:0;
        width: 100%;
        height:100%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size:cover;
        background-image:url("../assets/images/login-bg.png");
    }
    #cb_content{
        width: 450px;
        height: auto;
        margin: 100px auto auto auto;
        background: rgba(255,255,255,.88);
        border-radius: 4px;
        padding: 40px 0px 80px 0px;
        display: flex;
        flex-direction:column;
        align-items:center;
    }
    #cb_logo{
        text-align: center;
    }
    #cb_logo img{
        width: 40px;
        height: 40px;
    }
    #cb_logo>img{
        width: 40px;
        height: 40px;
    }
    /* //标签选择*/
    #cb_xuanzhe{
        margin-top: 30px;
    }

    #cb_phone{
        margin: 20px auto 20px auto;
        width: 378px;
        height: 34px;
        background: white;
        border: cornflowerblue 1px solid;
        border-radius: 6px;
        line-height: 34px;
    }
    #cb_dong{
        margin: 20px auto 20px auto;
        width: 378px;
        height: 34px;
        background: white;
        border: cornflowerblue 1px solid;
        border-radius:6px;
        line-height: 34px;
    }
    .cb_mima{
        margin: 20px auto 20px auto;
        width: 378px;
        height: 34px;
        background: white;
        border: cornflowerblue 1px solid;
        border-radius:6px;
        line-height: 34px;
    }
    .cb_input{
        outline: none;
        border: none;
        height: 23.5px;
        /*margin-left: .1rem;*/
        width: 220px;
    }
    #cb_huoqu{
        font-size: 0.8em;
        width: 20px;
        height: 22px;
        background: rgba(128,128,128,0.5);
        border-radius: 4px;
        cursor: pointer;
        margin-left:20px;
    }
    .login_btn{
        display: block;
        margin: 20px auto auto auto;
        width: 378px;
        height: 34px;
        line-height: 34px;
        background-color: #1AA5FF;
        color: white;
        font-weight: bolder;
        font-size: 18px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        letter-spacing: 10px;
        text-align: center;
    }
    .register_span{
        margin-right:30px;
    }
    .register_span2{
        margin-left:30px;
    }
    #to_denglu{
        margin-left: 180px;
        color: cornflowerblue;
        cursor: pointer;
    }

  /*  //对话框的位置以及大小*/
   .cb_duihua{
       margin:120px auto auto auto;
   }

</style>
